$(function(){

  // Todo Model
  // ----------

  // Our basic **Todo** model has `title`, `order`, and `done` attributes.
  var Juego = Backbone.Model.extend({

    // Default attributes for the todo item.
    defaults: function() {
      return {
        tablero: [[0,0,0],[0,0,0],[0,0,0]],
        jugadas: JugadasLista,
		jugador_a: null,
		jugador_b: null,
        done: false
      };
    },

    // Toggle the `done` state of this todo item.
    jugar: function(jugador_actual,posicion_jugada) {
      this.juagadas.create({jugador: jugador_actual,posicion:posicion_jugada});
    }

  });

   var Jugada = Backbone.Model.extend({

    // Default attributes for the todo item.
    defaults: function() {
      return {
		numero: Jugadas.siguienteJugada(),
        jugador: null,
        posicion: [0,0]
      };
    },
  });
  // Todo Collection
  // ---------------

  // The collection of todos is backed by *localStorage* instead of a remote
  // server.
  var JugadasLista = Backbone.Collection.extend({

    // Reference to this collection's model.
    model: Jugada,

    // Save all of the todo items under the `"todos-backbone"` namespace.
    localStorage: new Backbone.LocalStorage("jugadas-backbone"),

    // Filter down the list of all todo items that are finished.
    jugador: function(nombre_jugador) {
      return this.where({jugador: nombre_jugador});
    },

      // We keep the Todos in sequential order, despite being saved by unordered
    // GUID in the database. This generates the next order number for new items.
    siguienteJugada: function() {
      if (!this.length) return 1;
      return this.last().get('numero') + 1;
    },

    // Todos are sorted by their original insertion order.
    comparator: 'numero'

  });

  // Create our global collection of **Todos**.
  var Jugadas = new JugadasLista;

  // Todo Item View
  // --------------

  // The Application
  // ---------------

  // Our overall **AppView** is the top-level piece of UI.
  var AppView = Backbone.View.extend({

    // Instead of generating a new element, bind to the existing skeleton of
    // the App already present in the HTML.
    el: $("#tatetiAPP"),

    // Delegated events for creating new items, and clearing completed ones.
    events: {
      "click #new-game":  "createNewGame",
      "click #be-polite": "bePolite",
      "click #delete-game": "deleteCurrentGame"
    },

    createNewGame: function() {
     alert('Crea pus unoooo'); 
    },

    // Add a single todo item to the list by creating a view for it, and
    // appending its element to the `<ul>`.
    bePolite: function() {
      alert('No seeeeas pues mal educadoooo');
    },

    // Add all items in the **Todos** collection at once.
    deleteCurrentGame: function() {
      alert('y bueno.. borra mbae');
    }

  });

  // Finally, we kick things off by creating the **App**.
  var App = new AppView;

});
